<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.layout.Layout.html" ext:member="" ext:cls="Ext.layout.Layout">Layout</a>
  <img src="resources/elbow-end.gif"><a href="output/Ext.layout.ContainerLayout.html" ext:member="" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a>
    <img src="resources/elbow-end.gif"><a href="output/Ext.layout.FitLayout.html" ext:member="" ext:cls="Ext.layout.FitLayout">FitLayout</a>
      <img src="resources/elbow-end.gif">CardLayout</pre></div><h1>Class <a href="source/CardLayout.html#cls-Ext.layout.CardLayout">Ext.layout.CardLayout</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.layout</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/CardLayout.html#cls-Ext.layout.CardLayout">CardLayout.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/CardLayout.html#cls-Ext.layout.CardLayout">CardLayout</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.layout.FitLayout.html" ext:cls="Ext.layout.FitLayout" ext:member="">FitLayout</a></td></tr></table><div class="description"><p>This layout manages multiple child Components, each is fit to the Container, where only a single child Component
can be visible at any given time.  This layout style is most commonly used for wizards, tab implementations, etc.
This class is intended to be extended or created via the layout:'card' <a href="output/Ext.Container.html#Ext.Container-layout" ext:member="layout" ext:cls="Ext.Container">Ext.Container.layout</a> config,
and should generally not need to be created directly via the new keyword.</p>
<p>The CardLayout's focal method is <a href="output/Ext.layout.CardLayout.html#Ext.layout.CardLayout-setActiveItem" ext:member="setActiveItem" ext:cls="Ext.layout.CardLayout">setActiveItem</a>.  Since only one panel is displayed at a time,
the only way to move from one Component to the next is by calling setActiveItem, passing the id or index of
the next panel to display.  The layout itself does not provide a user interface for handling this navigation,
so that functionality must be provided by the developer.</p>
<p>Containers that are configured with a card layout will have a method setActiveItem dynamically added to it. 
<pre><code><b>var</b> p = <b>new</b> Ext.Panel({
          fullscreen: true,
          layout: <em>'card'</em>,
          items: [{
              html: <em>'Card 1'</em>
          },{
              html: <em>'Card 2'</em>
          }]
      });
      p.setActiveItem(1);</code></pre>
</p></div><div class="hr"></div><a id="Ext.layout.CardLayout-configs"></a><h2>Config Options</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Config Options</th><th class="msource-header">Defined By</th></tr><tr class="config-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-itemCls"></a><b><a href="source/ContainerLayout.html#cfg-Ext.layout.ContainerLayout-itemCls">itemCls</a></b> : String<div class="mdesc"><div class="short">An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to t...</div><div class="long"><p>An optional extra CSS class that will be added to the container. This can be useful for adding
customized styles to the container or any of its children using standard CSS rules. See
<a href="output/Ext.Component.html" ext:cls="Ext.Component">Ext.Component</a>.<a href="output/Ext.Component.html#Ext.Component-ctCls" ext:member="ctCls" ext:cls="Ext.Component">ctCls</a> also.</p>
</p></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#itemCls" ext:member="#itemCls" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr></tbody></table><a id="Ext.layout.CardLayout-props"></a><h2>Public Properties</h2><div class="no-members">This class has no public properties.</div><a id="Ext.layout.CardLayout-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-getActiveItem"></a><b class="method"><a href="source/CardLayout.html#method-Ext.layout.CardLayout-getActiveItem">getActiveItem</a></b><span class="openparen">(</span><span class="closeparen">)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Return the active (visible) component in the layout.</div><div class="long">Return the active (visible) component in the layout.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CardLayout</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-getLayoutItems"></a><b class="method"><a href="source/ContainerLayout.html#method-Ext.layout.ContainerLayout-getLayoutItems">getLayoutItems</a></b><span class="openparen">(</span><span class="closeparen">)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Array</span><div class="mdesc"><div class="short">Returns an array of child components.</div><div class="long">Returns an array of child components.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Array</code><div class="sub-desc">of child components</div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#getLayoutItems" ext:member="#getLayoutItems" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-getNext"></a><b class="method"><a href="source/CardLayout.html#method-Ext.layout.CardLayout-getNext">getNext</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">boolean&nbsp;wrap</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Return the active (visible) component in the layout to the next card, optional wrap parameter to wrap to the first
ca...</div><div class="long">Return the active (visible) component in the layout to the next card, optional wrap parameter to wrap to the first
card when the end of the stack is reached.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>wrap</code> : boolean<div class="sub-desc">Wrap to the first card when the end of the stack is reached.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CardLayout</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-getPrev"></a><b class="method"><a href="source/CardLayout.html#method-Ext.layout.CardLayout-getPrev">getPrev</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">boolean&nbsp;wrap</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Return the active (visible) component in the layout to the previous card, optional wrap parameter to wrap to
the last...</div><div class="long">Return the active (visible) component in the layout to the previous card, optional wrap parameter to wrap to
the last card when the beginning of the stack is reached.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>wrap</code> : boolean<div class="sub-desc">Wrap to the first card when the end of the stack is reached.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CardLayout</td></tr><tr class="method-row expandable inherited"><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.ContainerLayout-getTarget"></a><b class="method"><a href="source/ContainerLayout.html#method-Ext.layout.ContainerLayout-getTarget">getTarget</a></b><span class="openparen">(</span><span class="closeparen">)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">Ext.Element</span><div class="mdesc"><div class="short">Returns the owner component's resize element.</div><div class="long">Returns the owner component's resize element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li>None.</li></ul><strong>Returns:</strong><ul><li><code>Ext.Element</code><div class="sub-desc"></div></li></ul></div></div></div></td><td class="msource"><a href="output/Ext.layout.ContainerLayout.html#getTarget" ext:member="#getTarget" ext:cls="Ext.layout.ContainerLayout">ContainerLayout</a></td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-next"></a><b class="method"><a href="source/CardLayout.html#method-Ext.layout.CardLayout-next">next</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Mixed&nbsp;anim</span><span class="comma">,&nbsp;</span><span title="Required" class="required">boolean&nbsp;wrap</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Sets the active (visible) component in the layout to the next card, optional wrap parameter to wrap to the first
card...</div><div class="long">Sets the active (visible) component in the layout to the next card, optional wrap parameter to wrap to the first
card when the end of the stack is reached.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>anim</code> : Mixed<div class="sub-desc">Animation to use for the card transition</div></li><li><code>wrap</code> : boolean<div class="sub-desc">Wrap to the first card when the end of the stack is reached.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CardLayout</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-prev"></a><b class="method"><a href="source/CardLayout.html#method-Ext.layout.CardLayout-prev">prev</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">Mixed&nbsp;anim</span><span class="comma">,&nbsp;</span><span title="Required" class="required">boolean&nbsp;wrap</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Sets the active (visible) component in the layout to the previous card, optional wrap parameter to wrap to
the last c...</div><div class="long">Sets the active (visible) component in the layout to the previous card, optional wrap parameter to wrap to
the last card when the beginning of the stack is reached.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>anim</code> : Mixed<div class="sub-desc">Animation to use for the card transition</div></li><li><code>wrap</code> : boolean<div class="sub-desc">Wrap to the first card when the end of the stack is reached.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CardLayout</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi">&nbsp;</a></td><td class="sig"><a id="Ext.layout.CardLayout-setActiveItem"></a><b class="method"><a href="source/CardLayout.html#method-Ext.layout.CardLayout-setActiveItem">setActiveItem</a></b><span class="openparen">(&nbsp;</span><span title="Required" class="required">String/Number&nbsp;item</span><span class="closeparen">&nbsp;)</span><span class="colon">&nbsp;:&nbsp;</span><span class="return">void</span><div class="mdesc"><div class="short">Sets the active (visible) item in the layout.</div><div class="long">Sets the active (visible) item in the layout.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>item</code> : String/Number<div class="sub-desc">The string component id or numeric index of the item to activate</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">CardLayout</td></tr></tbody></table><a id="Ext.layout.CardLayout-events"></a><h2>Public Events</h2><div class="no-members">This class has no public events.</div></div>